<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:include="template/dashboard :: head('客户端管理页面')">
    <!-- This block will be replaced by template. -->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <!-- Main Header -->
    <header class="main-header" th:replace="template/dashboard :: main-header">
        <!-- This block will be replaced by template. -->
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar" th:replace="template/dashboard :: main-sidebar">
        <!-- This block will be replaced by template. -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                <h1>客户端管理</h1>
                <p>在这里管理客户端（屁话）</p>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#" th:href="@{/}"><i class="fa fa-dashboard"></i> Dashboard</a></li>
                <li>OAuth2 管理</li>
                <li class="active">客户端管理</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">

            <!-- Your Page Content Here -->
            <div class="row">
                <div class="col-md-12" th:include="template/messages :: messages">
                    <!-- This block will be replaced by template. -->
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">客户端列表</h3>
                            <div class="box-tools">
                                <th:block
                                        th:include="template/bootstrap :: page-navigation (pageable=${clientDetailsList})"></th:block>
                            </div>
                        </div>
                        <div class="box-body table-responsive no-padding">
                            <table class="table table-hover">
                                <tr>
                                    <th>#</th>
                                    <th>客户端名称</th>
                                    <th>客户端ID</th>
                                    <th>AccessToken<br/>有效秒数</th>
                                    <th>RefreshToken<br/>有效秒数</th>
                                    <th>授权方式</th>
                                    <th>授权范围</th>
                                    <th>可用资源ID</th>
                                    <th>已注册<br/>跳转URI</th>
                                    <th>操作</th>
                                </tr>
                                <th:block th:each="clientDetails, iterStat : ${clientDetailsList}">
                                    <tr>
                                        <td th:text="${iterStat.count}" rowspan="2">#</td>
                                        <td th:text="${clientDetails.clientName}" rowspan="2">客户端名称</td>
                                        <td th:text="${clientDetails.clientId}" rowspan="2">客户端ID</td>
                                        <td th:text="${clientDetails.accessTokenValiditySeconds}">AccessToken<br/>有效秒数
                                        </td>
                                        <td th:text="${clientDetails.refreshTokenValiditySeconds}">RefreshToken<br/>有效秒数
                                        </td>
                                        <td>
                                            <li class="label label-primary"
                                                  th:each="grantType : ${clientDetails.authorizedGrantTypes}">
                                                [[${grantType}]]<br />
                                            </li>
                                        </td>
                                        <td>
                                            <li class="label label-info" th:each="scope : ${clientDetails.scope}"
                                                  th:inline="text">
                                                [[${scope}]]&nbsp;
                                                <span class="glyphicon glyphicon-ok" th:if="${clientDetails.isAutoApprove(scope)}"
                                                    data-toggle="tooltip" title="自动授权"></span>
                                                <br />
                                            </li>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-default" data-toggle="collapse"
                                                    th:attr="data-target=|#resource-id-${iterStat.count}|,aria-controls=|resource-id-${iterStat.count}|"
                                                    aria-expanded="false">点击查看
                                            </button>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-default" data-toggle="collapse"
                                                    th:attr="data-target=|#redirect-uri-${iterStat.count}|,aria-controls=|redirect-uri-${iterStat.count}|"
                                                    aria-expanded="false">点击查看
                                            </button>
                                        </td>
                                        <td>
                                            <a sec:authorize="hasRole('ROLE_ADMIN')" class="btn btn-danger btn-delete"
                                               th:attr="data-client-id=${clientDetails.clientId}"
                                               role="button">删除</a>
                                            <a sec:authorize="hasRole('ROLE_ADMIN')" class="btn btn-warning" href="#"
                                               th:href="@{/clientDetails(edit=${clientDetails.clientId})}" role="button">编辑</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="7">
                                            <div class="collapse" th:attr="id=|resource-id-${iterStat.count}|">
                                                <h6>可用资源ID</h6>
                                                <span class="label label-success"
                                                      th:each="resourceId : ${clientDetails.resourceIds}"
                                                      th:text="${resourceId}">可用资源ID</span>
                                            </div>
                                            <hr/>
                                            <div class="collapse" th:attr="id=|redirect-uri-${iterStat.count}|">
                                                <h6>已注册跳转URI</h6>
                                                <ul>
                                                    <li th:each="redirectUri, redirectUriIterStat : ${clientDetails.registeredRedirectUri}"
                                                        th:text="${redirectUri}">url
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                </th:block>
                            </table>
                        </div>
                        <div class="box-footer clearfix">
                            <th:block
                                    th:include="template/bootstrap :: page-navigation (pageable=${clientDetailsList})"></th:block>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="box">
                        <div class="box-header with-border">
                            <h3 class="box-title" th:text="${#strings.isEmpty(edit)?'增加客户端' : '编辑客户端'}">编辑/增加客户端</h3>
                        </div>
                        <form id="clientDetailsForm" action="#" th:object="${clientDetails}" th:action="@{/clientDetails}"
                              th:method="${#strings.isEmpty(edit)}? 'POST' : 'PUT'">
                            <div class="box-body">
                                <div class="row" th:if="${not #strings.isEmpty(edit)}">
                                    <div class="form-group col-lg-6">
                                        <label id = "clientId" th:attr="data-client-id=${clientDetails.clientId}">客户端ID</label>
                                        <div th:if="${not #strings.isEmpty(edit)}" th:text="*{clientId}"></div>
                                        <!--<input type="hidden" class="form-control" th:field="*{clientId}" id="clientId"-->
                                               <!--placeholder="客户端ID" required="required" th:disabled="${edit}"/>-->
                                    </div>
                                    <div class="form-group col-lg-6">
                                        <label >客户端密码</label>
                                        <div th:if="${not #strings.isEmpty(edit)}" th:text="*{clientSecret}"></div>
                                        <!--<input type="hidden" class="form-control" th:field="*{clientSecret}"-->
                                               <!--id="clientSecret" placeholder="客户端密码" required="required"/>-->
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-lg-12">
                                        <label for="clientName">客户端名称</label>
                                        <input type="text" class="form-control" th:field="*{clientName}" id="clientName"
                                               placeholder="客户端名称" required="required"/>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-lg-3">
                                        <label for="accessTokenValiditySeconds">AccessToken有效秒数</label>
                                        <input type="number" class="form-control"
                                               th:field="*{accessTokenValiditySeconds}" id="accessTokenValiditySeconds"
                                               placeholder="AccessToken有效秒数"/>
                                    </div>
                                    <div class="form-group col-lg-3">
                                        <div class="col-padding-fixed">
                                            <label for="refreshTokenValiditySeconds">RefreshToken有效秒数</label>
                                            <select class="form-control select2"
                                                    id="refreshTokenValiditySeconds" name="refreshTokenValiditySeconds">
                                                <option th:each="refreshTokenValidity : ${T(com.ftqh.tutorial.security.oauth2.provider.client.enums.RefreshTokenValidity).values()}"
                                                        th:value="${refreshTokenValidity}"
                                                        th:selected="${#lists.contains(#objects.nullSafe(clientDetails.refreshTokenValiditySeconds, {}), refreshTokenValidity.seconds)}"
                                                        th:text="${refreshTokenValidity.text}">RefreshToken有效秒数
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group col-lg-6 ">
                                        <div class="col-padding-fixed">
                                            <label>授权方式</label>
                                            <select multiple="multiple" class="form-control select2"
                                                    id="authorizedGrantTypes" name="authorizedGrantTypes">
                                                <option th:each="grantType : ${T(com.ftqh.tutorial.security.oauth2.provider.client.enums.GrantType).values()}"
                                                        th:value="${grantType.value}"
                                                        th:selected="${#lists.contains(#objects.nullSafe(clientDetails.authorizedGrantTypes, {}), grantType.value)}"
                                                        th:text="${grantType.value}">授权方式
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-lg-12">
                                        <div class="col-padding-fixed">
                                            <label>授权范围</label>
                                            <select multiple="multiple" class="form-control select2" id="scope"
                                                    name="scope">
                                                <option th:each="grantScope : ${grantScopes}"
                                                        th:value="${grantScope.value}"
                                                        th:selected="${#lists.contains(#objects.nullSafe(clientDetails.scope, {}), grantScope.value)}"
                                                        th:text="${grantScope.value}">授权范围
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-lg-12">
                                        <div class="col-padding-fixed">
                                            <label>自动授权范围</label>
                                            <select multiple="multiple" class="form-control select2"
                                                    id="autoApproveScopes" name="autoApproveScopes">
                                                <option th:each="scope : ${T(com.ftqh.tutorial.security.oauth2.provider.client.enums.GrantScope).values()}"
                                                        th:value="${scope.value}"
                                                        th:selected="${#lists.contains(#objects.nullSafe(clientDetails.autoApproveScopes,{}), scope.value)}"
                                                        th:text="${scope.value}">授权范围
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" id="autoApproveAll" name="autoApproveAll"
                                                       value="true" th:checked="${clientDetails.autoApprove} eq 'true'"/>
                                                <span class="label label-danger">全范围自动授权</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-lg-12">
                                        <div class="col-padding-fixed">
                                            <label>可用资源ID</label>
                                            <select multiple="multiple" name="resourceIds" class="form-control select2">
                                                <option th:each="resourceId : ${resourceIds}"
                                                        th:value="${resourceId.value}"
                                                        th:selected="${#lists.contains(#objects.nullSafe(selectedResourceIds, {}), resourceId.value)}"
                                                        th:text="${resourceId.value}">可用资源ID
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-lg-12">
                                        <label for="redirectUris">注册跳转URI</label>
                                        <textarea class="form-control" id="redirectUris" rows="3" name="redirectUris"
                                                  th:text="${#strings.setJoin(clientDetails.registeredRedirectUri,'&#13;&#10;')}"></textarea>
                                        <span class="help-block">一行一个URI</span>
                                    </div>
                                </div>
                            </div>
                            <div class="box-footer">
                                <div class="form-group">
                                    <div class="pull-right">
                                        <button type="button" class="btn btn-primary btn-submit">提交</button>
                                        <a type="button" class="btn btn-default" href="#"
                                           th:href="@{/clientDetails}">取消</a>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" th:field="*{autoApprove}" class="form-control">
                            <input type="hidden" th:field="*{registeredRedirectUris}" class="form-control">
                        </form>
                    </div>
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <!-- Main Footer -->
    <footer class="main-footer" th:replace="template/dashboard :: main-footer">
        <!-- This block will be replaced by template. -->
    </footer>

    <th:block th:replace="template/dashboard :: control-sidebar">
        <!-- This block will be replaced by template. --></th:block>
</div>
<!-- ./wrapper -->

<th:block th:replace="template/dashboard :: required-js-scripts">
    <!-- This block will be replaced by template. -->
</th:block>

<script src=""  th:src="@{/resource/js/common.js}"></script>
<!-- clientDetails -->
<script src="" th:src="@{/resource/js/clientDetails.js}"></script>

<!--<script type="text/javascript">
    function setAutoApprove(bool){
        if(bool){
            $("input[name='autoApprove']").val("true");
        }else{
            var autoApproveScopes = $("#autoApproveScopes").select2("data");
            var autoApproves = [];
            for (var i=0;i<autoApproveScopes.length;i++){
                autoApproves.push(autoApproveScopes[i].text);
            }
            $("input[name='autoApprove']").val(autoApproves.join(","));
        }
    }
    $(function () {
        activeMenus('客户端管理');
        $("#autoApproveScopes").on("change",function(e){
            if($("input[name='autoApprove']").val()!="true"){
                setAutoApprove(false);
            }
        });
        $("#autoApproveAll").on('ifChecked', function (e) {
            setAutoApprove(true);
        });
        $("#autoApproveAll").on('ifUnchecked', function (e) {
            setAutoApprove(false);
        });
        $(".btn-delete").on("click", function (e) {
            var clientId = $(this).data("client-id");
            console.log("clientId:"+clientId);
            $.ajax({
                method: "DELETE",
                url: "clientDetails/"+clientId,
                success: function(msg){
                    console.log( "Data Deleted: " + msg );
                    location.href = "clientDetails"
                },
                error: function (e) {
                    console.log(e)
                    console.log("Client doesn't found");
                }
            });
        })
    });
</script>-->
</body>
</html>
